<template>
  <div>

<div style="text-align:center">
   <el-image :src="documentRecommend.url" ></el-image>
</div>
 

   
   
   <h5 style="font-size:35px;color:#670200;margin-bottom:10px;margin-top:20px">基本要素</h5>
   <div>
     <el-tag style="font-size:25px;margin-bottom:10px">案号：{{documentRecommend.num}}</el-tag>
   </div>
   <div>
     <el-tag style="font-size:25px;margin-bottom:10px">案件类别：{{documentRecommend.type}}</el-tag>
    
   </div>
   <div>
     <el-tag style="font-size:25px;margin-bottom:10px">  判决时间：{{documentRecommend.date}}</el-tag>
 
   </div>
   <div>
      <el-tag style="font-size:25px;margin-bottom:10px">  判决法院：{{documentRecommend.court}}</el-tag>
   
   </div>
  <h5 style="font-size:35px;color:#670200;margin-bottom:10px;margin-top:20px">特征要素</h5>
   <div>
     <el-tag style="font-size:25px;margin-bottom:10px;">  判决案由：{{documentRecommend.course}}</el-tag>
     
   </div>
   <div>
    <h5 style="font-size:35px;color:#670200;margin-bottom:10px;margin-top:20px">法律条文</h5>
     <div 
     v-for="(law,index) in laws"
     :key="index"
     >
      <el-tag style="font-size:25px;margin-bottom:10px;">   {{law.name}}</el-tag>
   
     </div>

     
   </div>
   <div>
       <h5 style="font-size:35px;color:#670200;margin-bottom:10px;margin-top:20px">争议焦点</h5>
     <div v-for="(issue,index) in issues"
     :key="index">
      <el-tag style="font-size:25px;margin-bottom:10px;">    {{issue.text}}</el-tag>
   
     </div>
   </div>
  
   <h5 style="font-size:35px;color:#670200;margin-bottom:10px;margin-top:20px">案情要素</h5>
  <el-timeline :reverse="reverse">
    <el-timeline-item
      v-for="(element, index) in elements"
      :key="index"
      color="#0bbd87"
      :timestamp="element.timestamp">
        <el-tag type="success" style="font-size:25px">{{element.text}}</el-tag>
      
    </el-timeline-item>
  </el-timeline>

  <h1 style="font-size:40px;color:#670200" >关系抽取</h1>

    <div class="echartLayout">
      <div
        id="container"
        style="width: 100%; height: 500px; overflow: hidden"
      ></div>
    </div>
  </div>
</template>

<script>
import {findDocumentDetails} from "@/api/getDocumentRecommendData.js";;
import * as echarts from "echarts";
export default {
 
 
  data() {
    return {
    
       documentRecommend:{},
       issues:[],
       laws:[],
       elements:[],

      myChart: null,
      chartData: [],
      chartLink: [],
      activities: [],
    };
  },
  mounted() {
    this.getDetails();
  
     
  },
  created(){
   
    


  },
  methods: {

    async getDetails()
    {
      const result = await findDocumentDetails(this.$route.query.learnId)
      console.log(result.data.data)
      this.documentRecommend = result.data.data.documentRecommend
      this.issues = result.data.data.issues
      this.laws = result.data.data.laws
      this.elements = result.data.data.elements
      this.chartData = result.data.data.points
      console.log("初始化前的chartData"+this.chartData)
      this.chartLink = result.data.data.links
      this.initEchart()

    },
    initEchart() {
      console.log("路由传递的参数为{}",this.$route.query.learnId)



      let dom = document.getElementById("container");
      this.myChart = echarts.init(dom);




      let option = {
        tooltip: {
          show: false,
        },
        series: [
          {
           autoCurveness: 0.01, //多条边的时候，自动计算曲率
         
          layout: 'force',
            edgeLabel: {
              normal: {
                 position: "middle",
                formatter: "{c}",
                show: true,
              },
            },

            
           edgeSymbol: ["circle", "arrow"], //边两边的类型
            force: {
              repulsion: 20000,
            },
            layout: "force",
            roam: true,
            lineStyle:{   //线条参数
              width:2,
               color: "#6495ED",
              opacity:0.5

            },
            itemStyle: {
              normal: {
                color: 
                function(params) {
                        return params.data.color    //获取具体的颜色参数
                    }
              },
              //鼠标放上去有阴影效果
              emphasis: {
                shadowColor: "#3721db",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 40,
              },
            },
            label: {
              normal: {
                show: true,
              },
            },
          

            symbolSize: 40,
            type: "graph",
            links: this.chartLink,
            data: this.chartData,
          },
        ],
      };
      this.myChart.setOption(option);
      this.myChart.on("click", function (params) {
        console.log(params.data); //获取点击的节点的数据信息
      });
    },
   
  },
};
</script>

<style scoped>
.echartLayout {
    /* margin: auto;
    position: absolute; */
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
</style>